<template>
  <div class="toper">
    <div class="titleBox">
      <div class="title">
        我的足迹
      </div>
    </div>

    <div class="screening_box">
      <div class="screening_l" />
      <div
        v-if="opreateStatus === false"
        class="screening_r"
      >
        <button
            
          class="OperationBtn"
          @click="Operation"
        >
          批量操作
        </button>
      </div>

      <div
        v-if="opreateStatus === true"
        class="screening_r"
      >
        <div>
          <el-checkbox 
            v-model="slectedAll" 
            @change="selectAll"
          > 
            全选
          </el-checkbox>
        </div>
        <div @click="AllAddCar">
          <img
            src="../../assets/img/cart_seleted.png"
            alt=""
          >
          加入购物车
        </div>
        <div @click="AllCancelCollection">
          删除
        </div>
        <button
          class="OperationBtn"
          @click="Operation"
        >
          完成
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import unSelected from "../../assets/img/un_selected.png";
import selected from "../../assets/img/selected.png";
export default {
  data() {
    return {
      activeIndex: 1,
      isSelectedAll: false,
      slectedAll: false,
      opreateStatus: false,
      product: {},
      SearchInput: '', // 搜索
      classList: [], // 分类筛选
      tagList: [], // 标签筛选
      classListActive: '', // 分类筛选选择
      tagListActive: '', // 标签筛选
      unSelected: unSelected,
      selected: selected,
    };
  },
  mounted() {},
  methods: {
    //批量操作 按钮切换 并且设置蒙版
    Operation() {
      this.opreateStatus = !this.opreateStatus;
      this.isSelectedAll = !this.isSelectedAll;
      this.slectedAll = false
      this.$emit("selectStatus", this.isSelectedAll);
    },
    // 是否全选  设置蒙版按钮样式
    selectAll(e) {
      this.slectedAll = e;
      this.$emit("selectStatusAll", e);
    },
    // 是否全选 
    selectStatus(e) {
      this.slectedAll = e;
    },
     // 全局刷新
    AllRefreshPage() {
      console.log('我进行了全局刷新')
    },
    // 批量加入购物车
		AllAddCar() {
      this.$emit("AllAddCar");
		},
    // 批量取消
		AllCancelCollection() {
			this.$emit("AllCancelCollection");
		},
  },
};
</script>

<style scoped lang="scss">
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #999;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #999;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #999;
}

.BtnRight {
  justify-content: flex-end;
}

.BtnBetween {
  justify-content: space-between;
}

.toper {
  // height: 12.5rem;
  background: #fff;
  margin-bottom: 1.25rem;
  padding-bottom: 1.31rem;
  .titleBox {
    display: flex;
    flex-direction: row;
    padding: 2.75rem 2.63rem 0 2.63rem;
    align-items: center;

    .title {
      font-size: 1.13rem;
      color: #333;
    }

    .setting {
      font-size: 0.88rem;
      color: #999;
      display: flex;
      flex-direction: row;
      vertical-align: middle;
      align-items: center;

      img {
        margin-right: 0.56rem;
      }
    }
  }

  .msgType {
    margin: 1.31rem 1.75rem 0;
    border-bottom: 0.06rem solid #d8d8d8;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .menuList {
      display: flex;
      flex-direction: row;

      .menu {
        text-align: center;
        font-size: 1.13rem;
        width: 6.75rem;
        color: #666666;
        padding: 0.94rem 2.5rem;
        cursor: pointer;

        &:first-child {
          padding-left: 0;

          &.active {
            position: relative;
            color: #f0406f;

            &:after {
              content: "";
              position: absolute;
              left: 0;
              bottom: 0;
              width: 6.75rem;
              height: 0.31rem;
              background: rgba(240, 64, 111, 1);
            }
          }
        }

        &.active {
          position: relative;
          color: #f0406f;

          &:after {
            content: "";
            position: absolute;
            left: 2.5rem;
            bottom: 0;
            width: 6.75rem;
            height: 0.31rem;
            background: rgba(240, 64, 111, 1);
          }
        }
      }
    }

    .search {
      display: flex;
      flex-direction: row;

      input,
      button {
        border: 0.06rem solid #999;
        border-radius: 0.31rem;
        font-size: 0.88rem;
        outline: none;
        color: #999;
        background-color: #fff;

        &.input {
          width: 9.19rem;
          height: 1.44rem;
          margin-right: 0.88rem;
          text-indent: 0.56rem;
        }

        &.searchBtn {
          cursor: pointer;
          width: 2.88rem;
          height: 1.44rem;
        }
      }
    }
  }

  .screening_box{
    display: flex;
    justify-content: space-between;
    padding: 1.31rem 2.63rem  0;
    align-items: center;
    font-size: .88rem;
    .screening_l{
      display: flex;
      flex-direction: column;
      .screening_l_item{
        display: flex;
        height: 2rem;
        align-items: center;
        .screening_itme_box{
          display: flex;
          align-items: center;
          .screening_itme{
            padding: 0 .8rem;
            cursor:pointer;//鼠标变小手
          }
        }
      }
      .activeclass{
        color: #f0406f;
      }
    }
    .screening_r{
      display: flex;
      flex-direction: row;
      color: #999999;
      align-items: center;
      font-size: 0.88rem;

      > div {
        margin-right: 1rem;
        cursor: pointer;

        &.selected {
          color: #f0406f;
        }
      }
      .OperationBtn{
        border: 0.06rem solid #999;
        border-radius: 0.31rem;
        font-size: 0.88rem;
        outline: none;
        color: #999;
        background-color: #fff;
        cursor: pointer;
        width: 4.88rem;
        height: 1.44rem;
      }
    }
  }
}
</style>
<style>
 .el-checkbox__input.is-checked .el-checkbox__inner, 
 .el-checkbox__input.is-indeterminate .el-checkbox__inner{
   background-color: #f03f6e !important;
   border-color: #f03f6e !important;
 }
 .el-checkbox__input.is-checked+.el-checkbox__label{
   color: #999 !important;
 }
 .el-checkbox__inner:hover{
    border-color: #f03f6e !important;
 }
 .el-checkbox__input.is-focus .el-checkbox_inner {
    border-color: #f03f6e !important;
 }
</style>